<!DOCTYPE html>
<html>
    <head>
        <#include "/head-file.htm" />
    </head>
    <body>
        <#include "/head.htm" />
        <div class="ms-content" id="pa-change-vue">
            <div class="ms-content-main">
                <div class="ms-content-left">
                    <div class="ms-content-left-info">
                        <img :src="'{ms:global.host/}/'+peopleInfo.puIcon" onerror='this.src="http://cdn.mingsoft.net/global/images/msheader.png"'>
                        <div style="display: none;" v-show="peopleInfo.puNickname!='' && peopleInfo.puNickname != undefined" v-if="peopleInfo.puNickname!='' && peopleInfo.puNickname != undefined" v-text="peopleInfo.puNickname"></div>
                        <div v-else v-text="'暂无昵称'"></div>
                    </div>
                    <div class="ms-content-left-list">
                        <div class="ms-content-left-list-info">
                            <a href="{ms:global.host/}/people/center.do">基本资料</a>
                        </div>
                        <div class="ms-content-left-list-pass">
                            <a class='active' href="{ms:global.host/}/people/password-change.do">修改密码</a>
                        </div>
                    </div>
                </div>
                <div class="ms-content-right">
                    <div class="ms-content-right-title">修改密码</div>
                    <div class="ms-content-right-form">
                        <form>
                            <div class="ms-content-old-password">
                                <span class="ms-content-old-password span">当前密码</span>
                                <input @keyup="chanageBackgroundColor" type="password" v-model="peopleOldPassword" name="peopleOldPassword" placeholder="必填，请填写旧密码">
                                <img class="ms-error-hide" src="{ms:global.host/}/{ms:global.style/}/images/error.png" :class="{'ms-error-show':errorText[0] != ''}" />
                                <span class="ms-error-hide" v-text="errorText[0]" :class="{'ms-error-show':errorText[0] != ''}"></span>
                            </div>
                            <div class="ms-content-old-password">
                                <span class="ms-content-new-password span">新密码</span>
                                <input @keyup="chanageBackgroundColor" type="password" v-model="peoplePassword" name="peoplePassword" placeholder="必填，6-20位，不能与旧密码相同">
                                <img class="ms-error-hide" src="{ms:global.host/}/{ms:global.style/}/images/error.png" :class="{'ms-error-show':errorText[1] != ''}" />
                                <span class="ms-error-hide" v-text="errorText[1]" :class="{'ms-error-show':errorText[1] != ''}"></span>
                            </div>
                            <div class="ms-content-old-password">
                                <span class="ms-content-old-password span">确认密码</span>
                                <input @keyup="chanageBackgroundColor" type="password" v-model="rePeoplePassword" name="rePeoplePassword" placeholder="必填，6-20位，与新密码一致">
                                <img class="ms-error-hide" src="{ms:global.host/}/{ms:global.style/}/images/error.png" :class="{'ms-error-show':errorText[2] != ''}" />
                                <span class="ms-error-hide" v-text="errorText[2]" :class="{'ms-error-show':errorText[2] != ''}"></span>
                            </div>
                        </form>
                        <div class="ms-content-click ms-content-click-password" :disabled="butText != '确认'" :class="{'ms-but-disabled':butText != '确认'}" @click="changePassword">确认</div>
                    </div>
                </div>
            </div>
        </div>
        <#include "/footer.htm" />
    </body>
</html>
<script type="text/javascript">
    //  $(function() {
    //      $(".head-menu-list-li").hover(function() {
    //          $(this).find(".head-menu-son-list").fadeToggle();
    //      });
    //  });
    ms.load(["ms", "ms.people", "ms.upload"], function(ms, mpeople, upload) {
        var paChangeVue = new Vue({
            el: "#pa-change-vue",
            data: {
                peopleInfo: {}, //用户信息
                peopleOldPassword: "", //用户旧密码
                peoplePassword: "", //用户密码
                rePeoplePassword: "", //确认密码
                butText: "确认", //按钮文字
                errorText: ['', '',''], //错误信息
            },
            methods: {
                //修改密码
                changePassword: function() {
                    var target = this;
                    if(!validator.isLength(this.peopleOldPassword, {
                            min: 6,
                            max: 20
                        })) {
                        this.showPrompt("旧密码必须6-20位字符", 1000, 0);
                        return;
                    }
                    if(this.peopleOldPassword.indexOf(" ") >= 0) {
                        this.showPrompt("旧密码不能包含空格", 1000, 0);
                        return;
                    }
                    if(!validator.isLength(this.peoplePassword, {
                            min: 6,
                            max: 20
                        })) {
                        this.showPrompt("新密码必须6-20位字符", 1000, 1);
                        return;
                    }
                    if(this.peoplePassword.indexOf(" ") >= 0) {
                        this.showPrompt("新密码不能包含空格", 1000, 1);
                        return;
                    }
                    if(!validator.isLength(this.rePeoplePassword, {
                            min: 6,
                            max: 20
                        })) {
                        this.showPrompt("确认密码必须6-20位字符", 1000, 2);
                        return;
                    }
                    if(this.rePeoplePassword.indexOf(" ") >= 0) {
                        this.showPrompt("确认密码不能包含空格", 1000, 2);
                        return;
                    }
                    if(this.peoplePassword != this.rePeoplePassword) {
                        this.showPrompt("确认密码与密码不一致", 1000, 2);
                        return;
                    }
                    if(this.peopleOldPassword == this.peoplePassword) {
                        this.showPrompt("新密码与旧密码输入一致", 1000, 1);
                    } else {
                        target.butText = "提交中..."
                        mpeople.people.changePassword($("form").serialize(), function(returnJson) {
                            if(returnJson.result) {
                                alert("密码修改成功，请重新登录")
                                $.ajax({
								                    type: "POST",
								                    url: "{ms:global.host/}/people/quit.do",
								                    success: function(msg) {
								                    }
								                })
                                location.href = "{ms:global.host/}/login.do";
                            } else {
                                target.showPrompt("旧密码错误", 1000, 0);
                            		target.butText = "确认"
                            };
                            target.butText = "确认"
                        })
                    }
                },
                //显示提示
                showPrompt: function(text, date, type) {
                    var target = this;
                    this.errorText[type] = text;
                    this.errorText = [this.errorText[0], this.errorText[1], this.errorText[2]];
                    setTimeout(
                        function() {
                            target.errorText[type] = '';
                            target.errorText = [target.errorText[0], target.errorText[1], this.errorText[2]];
                        }, date
                    )
                },
                chanageBackgroundColor: function(){
                    if($('input[name="peopleOldPassword"]').val().length >= 6 &&　$('input[name="peoplePassword"]').val().length >= 6 && $('input[name="rePeoplePassword"]').val().length >= 6){
                    	$('.ms-content-click-password').css("background-color", "#009aff");
                        $('.ms-content-click-password').css("pointer-events", 'visible');
                        $('.ms-content-click-password').css("color", "#fff");
                    }else{
                    	$('.ms-content-click-password').css("background-color", "#fafafa");
                        $('.ms-content-click-password').css('pointer-events', "none");
                        $('.ms-content-click-password').css("color", "#ddd");
                    }
                 },
            },
            mounted: function() {
                //获取个人信息
                var target = this;
                mpeople.people.user.info(function(returnJson) {
                    target.peopleInfo = returnJson;
                })
            }
        })
    })
</script>